<template>
  <div>
    <header class="header">
      <slot name="header"></slot>
    </header>
    <main class="main">
      <div v-for="(item, index) in list">
        <slot :data="item, index" :index="index"></slot>
      </div>
    </main>
    <footer class="footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>


<script setup lang='ts'>
import { ref, reactive } from 'vue'

type name = {
  name: string,
  age: number
}

const list = reactive<name[]>([
  { name: '张三', age: 18 },
  { name: '李四', age: 19 },
  { name: '王五', age: 20 }
])


</script>


<style scoped lang='less'>
.header {
  height: 200px;
  background-color: skyblue;
  color: #fff;
}

.main {
  height: 200px;
  background-color: rgb(59, 153, 92);
  color: #fff;
}

.footer {
  height: 200px;
  background-color: rgb(150, 31, 31);
  color: #fff;
}
</style>